import React, { useState, useEffect, useMemo } from 'react';
import * as echarts from 'echarts';

import {
  fetchsync_util,
  addkey_for_mxdata,
  convertISODateTimeToYYYYMMDDHHMMSS,
  view_item_util,
  openNotification_util,
  convertISODateTimeToYYYYMMDDHHMMSS_notutc,
} from '../util/util.js'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { use_jjh_initcolmun, use_bj_initcolmun, use_bqxj_jjh_initcolmun, use_zyjjbj_initcolmun } from './use_zbzx_config.js';
moment.locale('zh-cn')
var storage = window.localStorage;
import useStore from '../../useStore.js'
import CountdownFlipCard from './countdownFlipCard.js';
import Custom_table_hooks_config from '../newmes/custom_table_hooks_config.js';
import { Button, Input, InputNumber, Modal, Popconfirm, Tabs, Tag, Timeline, Badge } from 'antd';
import Upload_fj_hooks from '../newmes/upload_fj_hooks.js';
const { CheckableTag } = Tag;
import { useLatest } from 'ahooks';

const Gysjb_form = () => {
  //动态数据源
  const [dynDatasObject, setdynDatasObject] = useState({
  })
  const [isloading, setisloading] = useState(true)
  const [wlmxdata, setwlmxdata] = useState([])
  const [bjmxdata, setbjmxdata] = useState([])
  const [wlPrecisionMap, setWlPrecisionMap] = useState({})
  const [bjmxdata_tabs, setbjmxdata_tabs] = useState([])
  const [wlmxcolums, setwlmxcolums] = useState(JSON.parse(storage.pre_gysjb_item).data.ybzt == '已应标' ? use_jjh_initcolmun() : use_bqxj_jjh_initcolmun())
  const [bjcolums, setbjcolums] = useState(use_bj_initcolmun)
  const [zyjjbjcolums, setzyjjbjcolums] = useState(use_zyjjbj_initcolmun)
  const [bjjg, setBjjg] = useState(0)
  const [bjfj, setBjfj] = useState("")
  const [formdata, setformdata] = useState({})
  const [wldata, setWldata] = useState() //当前报价的物料数据
  const formdataRef = useLatest(formdata)
  const [djs, setDjs] = useState(0) //倒计时
  const [modalOpen, setModalOpen] = useState(false)
  const [bjlc, setBjlc] = useState(1) //当前报价轮次
  const [initStatus, setInitStatus] = useState(false) //初始化状态 
  const initStatusRef = useLatest(initStatus)
  const bjmxdataRef = useLatest(bjmxdata)
  const wldataRef = useLatest(wldata)
  const [activeKey, setactiveKey] = useState(1)
  const [supplierMap, setSupplierMap] = useState({}) //供应商名称映射
  /**
   * 强制刷新明细表 用于特殊场景
   */
  const [switche, setswitche] = useState(true);
  const forceupdate = () => { setswitche(false) }
  useEffect(() => { switche ? "1" : setswitche(true) }, [switche])

  const init = async () => {
    setisloading(true)
    setdynDatasObject({ ...dynDatasObject })
    setisloading(false)
  }

  const { setnowroute, collapsed } = useStore();

  // 供应商名称转换
  const transformSuppliers = (data) => {
    // 创建一个空的映射对象
    const supplierMap = {};
    // 创建一个字母表，用于生成供应商名称的后缀
    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let supplierIndex = 0;

    // 遍历原始数组，生成映射
    data.forEach(supplier => {
      if (!supplierMap[supplier.gysmc]) {
        // 生成新的供应商名称
        const supplierName = `供应商${alphabet[supplierIndex % alphabet.length]}`;
        supplierMap[supplier.gysmc] = supplierName;
        supplierIndex++;
      }
    });
    console.log(supplierMap, "supplierMap");
    setSupplierMap(supplierMap)
  }



  //加载主表数据
  const loadformdata = async (id) => {
    let url = JSON.parse(storage.pre_gysjb_item).data.ybzt == '已应标' ? "/admin/zbzx/query_gysjb_byid" : "/admin/zbzx/query_tb_jj"
    let rtdata = await fetchsync_util(url, 'POST', { id }, "json")
    let newformdata = rtdata.resultdata.formdata
    newformdata.dqlkssj = newformdata.dqlkssj ? convertISODateTimeToYYYYMMDDHHMMSS(newformdata.dqlkssj) : ""
    newformdata.dqljzsj = newformdata.dqljzsj ? convertISODateTimeToYYYYMMDDHHMMSS(newformdata.dqljzsj) : ""
    setDjs(newformdata.djs)
    // if (newformdata.jjzt == '竞价中') {
    //   //获取倒计时 秒数
    //   let djs = (new Date(newformdata.dqljzsj).getTime() - new Date().getTime()) / 1000
    //   setDjs(djs.toFixed(0))
    // }
    // else if (newformdata.jjzt == '待竞价') {
    //   //获取倒计时 秒数
    //   let djs = (new Date(newformdata.dqlkssj).getTime() - new Date().getTime()) / 1000
    //   // console.log(djs, "一开始的倒计时");
    //   setDjs(djs.toFixed(0))
    // }
    // else if (newformdata.jjzt == '竞价休息') {
    //   let djs = (new Date(newformdata.dqljzsj).getTime() + (newformdata.mljg * 60 * 1000) - new Date().getTime()) / 1000
    //   // console.log(djs, "竞价休息的倒计时");
    //   setDjs(djs.toFixed(0))
    // }
    //如果供应商保密竞价，则隐藏排名列
    if (newformdata.gysbmjj == '是') {
      if (JSON.parse(storage.pre_gysjb_item).data.ybzt == '已应标') {
        setwlmxcolums(use_jjh_initcolmun().filter((item) => item.dataIndex != "pm"))
        setbjcolums(use_bj_initcolmun().filter((item) => item.dataIndex != "blpm"))
        setzyjjbjcolums(use_zyjjbj_initcolmun().filter((item) => item.dataIndex != "blpm"))
        setbjmxdata_tabs(Array.from(new Set(bjmxdata.map(item => item.wlmc))))
      }
      else {
        setwlmxcolums(use_bqxj_jjh_initcolmun().filter((item) => item.dataIndex != "pm"))
        setbjcolums(use_bj_initcolmun().filter((item) => item.dataIndex != "blpm"))
        setzyjjbjcolums(use_zyjjbj_initcolmun().filter((item) => item.dataIndex != "blpm"))
        setbjmxdata_tabs(Array.from(new Set(bjmxdata.map(item => item.wlmc))))
      }
      //更新明细表
      setswitche(false)
    }
    else {
      if (JSON.parse(storage.pre_gysjb_item).data.ybzt == '已应标') {
        setwlmxcolums(use_jjh_initcolmun())
        setzyjjbjcolums(use_zyjjbj_initcolmun())
        setbjcolums(use_bj_initcolmun())
        setbjmxdata_tabs(Array.from(new Set(bjmxdata.map(item => item.wlmc))))
      }
      else {
        setwlmxcolums(use_bqxj_jjh_initcolmun())
        setzyjjbjcolums(use_zyjjbj_initcolmun())
        setbjcolums(use_bj_initcolmun())
        setbjmxdata_tabs(Array.from(new Set(bjmxdata.map(item => item.wlmc))))
      }
      setswitche(false)
    }
    const wlConfigMap = {}
    rtdata.resultdata.wlmxdata.forEach(item => {
      wlConfigMap[item.id] = item
    })
    setWlPrecisionMap(wlConfigMap)
    transformSuppliers(rtdata.resultdata.bjmxdata)
    setformdata({ ...newformdata })
    if (!initStatusRef.current) {
      setBjlc(newformdata.dqlc)
    }
    setInitStatus(true)
    //过滤淘汰物料
    setwlmxdata(addkey_for_mxdata(rtdata.resultdata.wlmxdata.filter((item) => item.SubTableCount != 1)))
    setbjmxdata(addkey_for_mxdata(rtdata.resultdata.bjmxdata.map((item) => {
      const config = wlConfigMap[item.bjwlmxid] || {}
      const normalizedPrice = normalizePriceByRule(item.blbj, config)
      return {
        ...item,
        blbj: normalizedPrice,
        bjsj: item.bjsj ? convertISODateTimeToYYYYMMDDHHMMSS(item.bjsj) : ""
      }
    })))
  }

  // 页面进入加载数据
  useEffect(() => {
    loadformdata(JSON.parse(storage.pre_gysjb_item).data.id)
    setisloading(false)
    let a = setInterval(() => {
      query_ifjjzz()
    }, 3000)
    return () => {
      clearInterval(a)
    }
  }, [])
  // 每分钟查询一次项目是否已竞价结束
  const query_ifjjzz = async () => {
    let rtdata = await fetchsync_util("/admin/zbzx/query_ifjjzz", 'POST', { id: JSON.parse(storage.pre_gysjb_item).data.id }, "json")
    // console.log(rtdata.resultdata.rtdata[0].xmzt, formdataRef.current.xmzt);
    if (rtdata.resultdata.rtdata[0].xmzt == "竞价结束" && formdataRef.current.xmzt == "竞价中") {
      openNotification_util("该项目已竞价结束")
      await loadformdata(JSON.parse(storage.pre_gysjb_item).data.id)
      setDjs(0)
    }
    else if (rtdata.resultdata.rtdata.some((item) => item.sftt == "是" && item.gysmc == storage.ygxm)) {
      openNotification_util("抱歉，您的报价无法满足本次招标要求，感谢您的参与，期待下次与贵公司的合作！")
      setnowroute({ route: '/shipSRM/mainpage', title: '首页', closeroute: '/shipSRM/zbzx/gysjb_form' })
      setDjs(0)
    }
    else {
      // console.log(11111);
      await loadformdata(JSON.parse(storage.pre_gysjb_item).data.id)
    }
  }

  // 获取数字的小数位数
  const getDecimalPlaces = (num) => {
    if (Math.floor(num) === num) return 0;
    const str = num.toString();
    if (str.indexOf('.') !== -1 && str.indexOf('e-') === -1) {
      return str.split('.')[1].length;
    } else if (str.indexOf('e-') !== -1) {
      const parts = str.split('e-');
      return parseInt(parts[1], 10);
    }
    return 0;
  }

  const ensureNumeric = (value) => {
    if (value === null || value === undefined || value === '') {
      return 0;
    }
    if (typeof value === 'number') {
      return value;
    }
    const parsed = parseFloat(String(value).replace(/,/g, ''));
    return Number.isNaN(parsed) ? 0 : parsed;
  }

  const isPercentMode = (value) => {
    if (value === null || value === undefined) return false;
    return String(value).includes('%');
  }

  const getBaseAmountForPrecision = (config = {}) => {
    if (!config) return 0;
    if (config.dqbj !== undefined && config.dqbj !== null && config.dqbj !== '') {
      return ensureNumeric(config.dqbj);
    }
    if (config.qsj !== undefined && config.qsj !== null && config.qsj !== '') {
      return ensureNumeric(config.qsj);
    }
    if (config.qsj_dj !== undefined && config.qsj_dj !== null && config.qsj_dj !== '') {
      return ensureNumeric(config.qsj_dj);
    }
    return 0;
  }

  const getPricePrecision = (config = {}) => {
    if (!config) return 2;
    const blje = config.blje;
    if (isPercentMode(blje)) {
      const baseAmount = getBaseAmountForPrecision(config);
      const baseDecimals = getDecimalPlaces(baseAmount);
      return Math.max(baseDecimals + 2, 2);
    }
    if (blje !== null && blje !== undefined && blje !== '') {
      const diff = ensureNumeric(blje);
      if (!Number.isNaN(diff)) {
        return getDecimalPlaces(diff);
      }
    }
    const baseAmount = getBaseAmountForPrecision(config);
    const baseDecimals = getDecimalPlaces(baseAmount);
    return Math.max(baseDecimals, 2);
  }

  const normalizePriceByRule = (price, config = {}) => {
    if (price === null || price === undefined || price === '') {
      return price;
    }
    const numericPrice = ensureNumeric(price);
    if (Number.isNaN(numericPrice)) {
      return price;
    }
    const precision = getPricePrecision(config);
    return Number(numericPrice.toFixed(precision));
  }

  const formatPriceByRule = (price, config = {}) => {
    if (price === null || price === undefined || price === '') {
      return '';
    }
    const numericPrice = ensureNumeric(price);
    if (Number.isNaN(numericPrice)) {
      return '';
    }
    const precision = getPricePrecision(config);
    return numericPrice.toFixed(precision);
  }

  const getConfigForRecord = (record) => {
    if (!record) return {};
    if (record.bjwlmxid && wlPrecisionMap[record.bjwlmxid]) {
      return wlPrecisionMap[record.bjwlmxid];
    }
    if (record.id && wlPrecisionMap[record.id]) {
      return wlPrecisionMap[record.id];
    }
    if (record.wlmxid && wlPrecisionMap[record.wlmxid]) {
      return wlPrecisionMap[record.wlmxid];
    }
    return record;
  }

  const formatColumnsWithPriceRule = (columns = []) => {
    return columns.map(col => {
      if (!col || !col.dataIndex) return col;
      if (col.dataIndex === 'blbj' || col.dataIndex === 'dqbj') {
        const originalRender = col.render
        return {
          ...col,
          render: (value, record, index) => {
            const formattedValue = formatPriceByRule(value, getConfigForRecord(record))
            if (typeof originalRender === 'function') {
              return originalRender(formattedValue, record, index)
            }
            return formattedValue
          }
        }
      }
      return col;
    });
  }

  // 处理报价
  const handleBj = async (wldata) => {
    if (formdata.jjzt != '竞价中') {
      openNotification_util("当前状态不能报价")
      return
    }
    const priceConfig = getConfigForRecord({ bjwlmxid: wldata?.id, ...wldata })
    const rawInputPrice = ensureNumeric(bjjg)
    const normalizedInputPrice = normalizePriceByRule(rawInputPrice, priceConfig)
    const formattedInputPrice = formatPriceByRule(normalizedInputPrice, priceConfig)
    if (!Number.isNaN(rawInputPrice) && normalizedInputPrice !== rawInputPrice) {
      const precision = getPricePrecision(priceConfig)
      openNotification_util(`您填写的报价将按保留${precision}位小数提交，系统已自动调整为${formattedInputPrice}`)
      setBjjg(normalizedInputPrice)
    }
    if (formdata.zbxs != '自由竞价') {
      if (bjmxdata.some((item) => item.bjlc == formdata.dqlc && item.bjwlmxid == wldata.id)) {
        openNotification_util("当前轮次该物料已报价")
        return
      }
    }
    if (normalizedInputPrice <= 0 || Number.isNaN(normalizedInputPrice)) {
      openNotification_util("请输入正确的报价金额")
      return
    }
    //只有竞价形式才进行报价校验
    if (formdata.zbxs == '竞价') {
      if (formdata.jjgz == "价高优先") {
        let filterdata = bjmxdata
          .filter((item) => item.bjwlmxid == wldata.id && item.bjlc != bjlc)
          .map(item => ({ ...item, blbj: ensureNumeric(item.blbj) }))
          .sort((a, b) => b.blbj - a.blbj)
        
        const highestBid = filterdata.length > 0 ? filterdata[0].blbj : null
        const startPrice = ensureNumeric(wldata.qsj)

        if (isPercentMode(wldata.blje)) {
          const percentDiff = ensureNumeric(String(wldata.blje).replace("%", ""))
          const thresholdFromHighestRaw = highestBid !== null ? highestBid + highestBid * percentDiff * 0.01 : 0
          const thresholdFromStartRaw = startPrice + startPrice * percentDiff * 0.01
          const thresholdFromHighest = highestBid !== null ? normalizePriceByRule(thresholdFromHighestRaw, priceConfig) : 0
          const thresholdFromStart = normalizePriceByRule(thresholdFromStartRaw, priceConfig)
          const minRequiredPrice = Math.max(thresholdFromHighest, thresholdFromStart)

          if (normalizedInputPrice < minRequiredPrice) {
            const parts = []
            if (highestBid !== null) {
              parts.push(`必须高于当前最高报价(${formatPriceByRule(highestBid, priceConfig)})加上差价比例(${wldata.blje})，即必须大于${formatPriceByRule(thresholdFromHighest, priceConfig)}`)
            }
            parts.push(`必须高于起始价(${formatPriceByRule(startPrice, priceConfig)})加上差价比例(${wldata.blje})，即必须大于${formatPriceByRule(thresholdFromStart, priceConfig)}`)
            const constraintMsg = parts.join("；同时")
            openNotification_util(`您的报价(${formattedInputPrice})${constraintMsg}`)
            return
          }
        } else {
          const amountDiff = ensureNumeric(wldata.blje)
          const thresholdFromHighestRaw = highestBid !== null ? highestBid + amountDiff : 0
          const thresholdFromStartRaw = startPrice + amountDiff
          const thresholdFromHighest = highestBid !== null ? normalizePriceByRule(thresholdFromHighestRaw, priceConfig) : 0
          const thresholdFromStart = normalizePriceByRule(thresholdFromStartRaw, priceConfig)
          const minRequiredPrice = Math.max(thresholdFromHighest, thresholdFromStart)

          if (normalizedInputPrice < minRequiredPrice) {
            const diffDisplay = formatPriceByRule(amountDiff, priceConfig)
            const parts = []
            if (highestBid !== null) {
              parts.push(`必须高于当前最高报价(${formatPriceByRule(highestBid, priceConfig)})加上差价金额(${diffDisplay})，即必须大于${formatPriceByRule(thresholdFromHighest, priceConfig)}`)
            }
            parts.push(`必须高于起始价(${formatPriceByRule(startPrice, priceConfig)})加上差价金额(${diffDisplay})，即必须大于${formatPriceByRule(thresholdFromStart, priceConfig)}`)
            const constraintMsg = parts.join("；同时")
            openNotification_util(`您的报价(${formattedInputPrice})${constraintMsg}`)
            return
          }
        }
      }

      else if (formdata.jjgz == "价低优先") {
        let filterdata = bjmxdata
          .filter((item) => item.bjwlmxid == wldata.id && item.bjlc != bjlc)
          .map(item => ({ ...item, blbj: ensureNumeric(item.blbj) }))
          .sort((a, b) => a.blbj - b.blbj)

        const lowestBid = filterdata.length > 0 ? filterdata[0].blbj : null
        const startPrice = ensureNumeric(wldata.qsj)

        if (isPercentMode(wldata.blje)) {
          const percentDiff = ensureNumeric(String(wldata.blje).replace("%", ""))
          const thresholdFromLowestRaw = lowestBid !== null ? lowestBid - lowestBid * percentDiff * 0.01 : Infinity
          const thresholdFromStartRaw = startPrice - startPrice * percentDiff * 0.01
          const thresholdFromLowest = Number.isFinite(thresholdFromLowestRaw) ? normalizePriceByRule(thresholdFromLowestRaw, priceConfig) : Infinity
          const thresholdFromStart = normalizePriceByRule(thresholdFromStartRaw, priceConfig)
          const maxAllowedPrice = Math.min(thresholdFromLowest, thresholdFromStart)

          if (normalizedInputPrice > maxAllowedPrice) {
            const parts = []
            if (Number.isFinite(thresholdFromLowest) && lowestBid !== null) {
              parts.push(`必须低于当前最低报价(${formatPriceByRule(lowestBid, priceConfig)})减去差价比例(${wldata.blje})，即必须小于${formatPriceByRule(thresholdFromLowest, priceConfig)}`)
            }
            parts.push(`必须低于起始价(${formatPriceByRule(startPrice, priceConfig)})减去差价比例(${wldata.blje})，即必须小于${formatPriceByRule(thresholdFromStart, priceConfig)}`)
            const constraintMsg = parts.join("；同时")
            openNotification_util(`您的报价(${formattedInputPrice})${constraintMsg}`)
            return
          }
        } else {
          const amountDiff = ensureNumeric(wldata.blje)
          const thresholdFromLowestRaw = lowestBid !== null ? lowestBid - amountDiff : Infinity
          const thresholdFromStartRaw = startPrice - amountDiff
          const thresholdFromLowest = Number.isFinite(thresholdFromLowestRaw) ? normalizePriceByRule(thresholdFromLowestRaw, priceConfig) : Infinity
          const thresholdFromStart = normalizePriceByRule(thresholdFromStartRaw, priceConfig)
          const maxAllowedPrice = Math.min(thresholdFromLowest, thresholdFromStart)

          if (normalizedInputPrice > maxAllowedPrice) {
            const diffDisplay = formatPriceByRule(amountDiff, priceConfig)
            const parts = []
            if (Number.isFinite(thresholdFromLowest) && lowestBid !== null) {
              parts.push(`必须低于当前最低报价(${formatPriceByRule(lowestBid, priceConfig)})减去差价金额(${diffDisplay})，即必须小于${formatPriceByRule(thresholdFromLowest, priceConfig)}`)
            }
            parts.push(`必须低于起始价(${formatPriceByRule(startPrice, priceConfig)})减去差价金额(${diffDisplay})，即必须小于${formatPriceByRule(thresholdFromStart, priceConfig)}`)
            const constraintMsg = parts.join("；同时")
            openNotification_util(`您的报价(${formattedInputPrice})${constraintMsg}`)
            return
          }
        }
      }
    }
    else if (formdata.zbxs == '自由竞价') {
      if (formdata.jjgz == "价高优先") {
        let filterdata = bjmxdata
          .filter((item) => item.bjwlmxid == wldata.id && item.bjlc != bjlc)
          .map(item => ({ ...item, blbj: ensureNumeric(item.blbj) }))
          .sort((a, b) => b.blbj - a.blbj)

        const highestBid = filterdata.length > 0 ? filterdata[0].blbj : null
        const basePrice = ensureNumeric(
          wldata.dqbj !== undefined && wldata.dqbj !== null && wldata.dqbj !== '' ? wldata.dqbj : wldata.qsj
        )

        if (isPercentMode(wldata.blje)) {
          const percentDiff = ensureNumeric(String(wldata.blje).replace("%", ""))
          const thresholdFromHighestRaw = highestBid !== null ? highestBid + highestBid * percentDiff * 0.01 : 0
          const thresholdFromStartRaw = basePrice + basePrice * percentDiff * 0.01
          const thresholdFromHighest = highestBid !== null ? normalizePriceByRule(thresholdFromHighestRaw, priceConfig) : 0
          const thresholdFromStart = normalizePriceByRule(thresholdFromStartRaw, priceConfig)
          const minRequiredPrice = Math.max(thresholdFromHighest, thresholdFromStart)

          if (normalizedInputPrice < minRequiredPrice) {
            const parts = []
            if (highestBid !== null) {
              parts.push(`必须高于当前最高报价(${formatPriceByRule(highestBid, priceConfig)})加上差价比例(${wldata.blje})，即必须大于${formatPriceByRule(thresholdFromHighest, priceConfig)}`)
            }
            parts.push(`必须高于起始价(${formatPriceByRule(basePrice, priceConfig)})加上差价比例(${wldata.blje})，即必须大于${formatPriceByRule(thresholdFromStart, priceConfig)}`)
            const constraintMsg = parts.join("；同时")
            openNotification_util(`您的报价(${formattedInputPrice})${constraintMsg}`)
            return
          }
        } else {
          const amountDiff = ensureNumeric(wldata.blje)
          const thresholdFromHighestRaw = highestBid !== null ? highestBid + amountDiff : 0
          const thresholdFromStartRaw = basePrice + amountDiff
          const thresholdFromHighest = highestBid !== null ? normalizePriceByRule(thresholdFromHighestRaw, priceConfig) : 0
          const thresholdFromStart = normalizePriceByRule(thresholdFromStartRaw, priceConfig)
          const minRequiredPrice = Math.max(thresholdFromHighest, thresholdFromStart)

          if (normalizedInputPrice < minRequiredPrice) {
            const diffDisplay = formatPriceByRule(amountDiff, priceConfig)
            const parts = []
            if (highestBid !== null) {
              parts.push(`必须高于当前最高报价(${formatPriceByRule(highestBid, priceConfig)})加上差价金额(${diffDisplay})，即必须大于${formatPriceByRule(thresholdFromHighest, priceConfig)}`)
            }
            parts.push(`必须高于起始价(${formatPriceByRule(basePrice, priceConfig)})加上差价金额(${diffDisplay})，即必须大于${formatPriceByRule(thresholdFromStart, priceConfig)}`)
            const constraintMsg = parts.join("；同时")
            openNotification_util(`您的报价(${formattedInputPrice})${constraintMsg}`)
            return
          }
        }
      }
      else if (formdata.jjgz == "价低优先") {
        let filterdata = bjmxdata
          .filter((item) => item.bjwlmxid == wldata.id && item.bjlc != bjlc)
          .map(item => ({ ...item, blbj: ensureNumeric(item.blbj) }))
          .sort((a, b) => a.blbj - b.blbj)

        const lowestBid = filterdata.length > 0 ? filterdata[0].blbj : null
        const basePrice = ensureNumeric(
          wldata.dqbj !== undefined && wldata.dqbj !== null && wldata.dqbj !== '' ? wldata.dqbj : wldata.qsj
        )

        if (isPercentMode(wldata.blje)) {
          const percentDiff = ensureNumeric(String(wldata.blje).replace("%", ""))
          const thresholdFromLowestRaw = lowestBid !== null ? lowestBid - lowestBid * percentDiff * 0.01 : Infinity
          const thresholdFromStartRaw = basePrice - basePrice * percentDiff * 0.01
          const thresholdFromLowest = Number.isFinite(thresholdFromLowestRaw) ? normalizePriceByRule(thresholdFromLowestRaw, priceConfig) : Infinity
          const thresholdFromStart = normalizePriceByRule(thresholdFromStartRaw, priceConfig)
          const maxAllowedPrice = Math.min(thresholdFromLowest, thresholdFromStart)

          if (normalizedInputPrice > maxAllowedPrice) {
            const parts = []
            if (Number.isFinite(thresholdFromLowest) && lowestBid !== null) {
              parts.push(`必须低于当前最低报价(${formatPriceByRule(lowestBid, priceConfig)})减去差价比例(${wldata.blje})，即必须小于${formatPriceByRule(thresholdFromLowest, priceConfig)}`)
            }
            parts.push(`必须低于起始价(${formatPriceByRule(basePrice, priceConfig)})减去差价比例(${wldata.blje})，即必须小于${formatPriceByRule(thresholdFromStart, priceConfig)}`)
            const constraintMsg = parts.join("；同时")
            openNotification_util(`您的报价(${formattedInputPrice})${constraintMsg}`)
            return
          }
        } else {
          const amountDiff = ensureNumeric(wldata.blje)
          const thresholdFromLowestRaw = lowestBid !== null ? lowestBid - amountDiff : Infinity
          const thresholdFromStartRaw = basePrice - amountDiff
          const thresholdFromLowest = Number.isFinite(thresholdFromLowestRaw) ? normalizePriceByRule(thresholdFromLowestRaw, priceConfig) : Infinity
          const thresholdFromStart = normalizePriceByRule(thresholdFromStartRaw, priceConfig)
          const maxAllowedPrice = Math.min(thresholdFromLowest, thresholdFromStart)

          if (normalizedInputPrice > maxAllowedPrice) {
            const diffDisplay = formatPriceByRule(amountDiff, priceConfig)
            const parts = []
            if (Number.isFinite(thresholdFromLowest) && lowestBid !== null) {
              parts.push(`必须低于当前最低报价(${formatPriceByRule(lowestBid, priceConfig)})减去差价金额(${diffDisplay})，即必须小于${formatPriceByRule(thresholdFromLowest, priceConfig)}`)
            }
            parts.push(`必须低于起始价(${formatPriceByRule(basePrice, priceConfig)})减去差价金额(${diffDisplay})，即必须小于${formatPriceByRule(thresholdFromStart, priceConfig)}`)
            const constraintMsg = parts.join("；同时")
            openNotification_util(`您的报价(${formattedInputPrice})${constraintMsg}`)
            return
          }
        }
      }
    }
    await fetchsync_util("/admin/zbzx/save_gysjb_bj", 'POST', {
      id: JSON.parse(storage.pre_gysjb_item).data.id, bjjg: normalizedInputPrice, bjfj, sl: wldata.sl, zbxs: formdata.zbxs,
      dqlc: formdata.dqlc, wlmc: wldata.wlmc, ggxh: wldata.ggxh, wlbm: wldata.wlbm, bjwlmxid: wldata.id, jjgz: formdata.jjgz
    }, "json")
    await loadformdata(JSON.parse(storage.pre_gysjb_item).data.id)
    setModalOpen(false)
    setBjjg(0)
    setBjfj("")
  }



  // ... existing code ...
  const initchartdrcctj = async () => {

    let bjmxdata = bjmxdataRef.current
    let wldata = wldataRef.current

    var chartDom = document.getElementById('chart_bjqs');
    var myChart = echarts.init(chartDom);

    // 筛选当前物料的报价数据并按轮次排序
    let filterData = bjmxdata
      .filter(item => item.bjwlmxid === wldata?.id)
      .sort((a, b) => a.bjlc - b.bjlc);

    // 准备X轴和Y轴数据
    let xData = filterData.map(item => `第${item.bjlc}轮`);
    let yData = filterData.map(item => item.blbj);

    var option = {
      title: {
        text: '报价趋势图',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 14
        }
      },
      tooltip: {
        trigger: 'axis',
        formatter: '{b}: {c}元'
      },
      xAxis: {
        type: 'category',
        data: xData,
        axisLabel: {
          color: '#666'
        }
      },
      yAxis: {
        type: 'value',
        name: '报价金额(元)',
        nameTextStyle: {
          color: '#666'
        },
        axisLabel: {
          color: '#666',
          formatter: '{value}'
        }
      },
      series: [{
        data: yData,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#a91f24'
        },
        lineStyle: {
          color: '#a91f24',
          width: 2
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(169,31,36,0.3)'
            }, {
              offset: 1,
              color: 'rgba(169,31,36,0.1)'
            }]
          }
        }
      }],
      grid: {
        left: '10%',
        right: '5%',
        bottom: '15%',
        top: '15%'
      }
    };

    option && myChart.setOption(option);

  };
  // ... existing code ...


  // 处理倒计时结束
  const handleDjsEnd = async () => {
    await loadformdata(JSON.parse(storage.pre_gysjb_item).data.id)
    if (formdata.xmzt != "竞价结束") {
      setBjlc(formdataRef.current.dqlc)
    }
    // let formdata = formdataRef.current
    // // 竞价结束
    // if (formdata.dqlc < formdata.jjls && (formdata.xmzt == "竞价中" || formdata.xmzt == "待竞价")) {
    //   if (formdata.jjzt == "竞价休息") {
    //     //当前轮次加一
    //     let dqlc = formdata.dqlc + 1
    //     setBjlc(dqlc)
    //     // 计算下一轮开始时间
    //     let xylkssj = new Date(formdata.dqljzsj).getTime() + formdata.mljg * 60 * 1000
    //     let dqlkssj = new Date(xylkssj)
    //     console.log(dqlkssj, "dqlkssj");

    //     // 计算下一轮结束时间
    //     let xyljzsj = new Date(xylkssj).getTime() + formdata.mlcx * 60 * 1000
    //     let dqljzsj = new Date(xyljzsj)
    //     console.log(dqljzsj, "dqljzsj");
    //     // 计算倒计时
    //     let djs = (dqljzsj.getTime() - new Date().getTime()) / 1000
    //     console.log(djs, "djs");
    //     setDjs(djs.toFixed(0))
    //     let jjzt = "竞价中"
    //     // 更新竞价数据
    //     let newformdata = { ...formdata, dqlc, jjzt, dqlkssj: convertISODateTimeToYYYYMMDDHHMMSS_notutc(dqlkssj), dqljzsj: convertISODateTimeToYYYYMMDDHHMMSS_notutc(dqljzsj) }
    //     setformdata(newformdata)
    //   }
    //   else if (formdata.jjzt == "竞价中") {

    //     //当前轮次加一
    //     let dqlc = formdata.dqlc
    //     let jjzt = "竞价休息"
    //     // 计算倒计时
    //     let djs = formdata.mljg * 60
    //     // 更新竞价数据
    //     let newformdata = { ...formdata, dqlc, jjzt }
    //     setDjs(djs.toFixed(0))
    //     setformdata(newformdata)
    //   }
    //   else if (formdata.jjzt == "待竞价") {
    //     let jjzt = "竞价中"
    //     // 计算倒计时
    //     let djs = (new Date(formdata.dqljzsj).getTime() - new Date().getTime()) / 1000
    //     setDjs(djs.toFixed(0))
    //     let newformdata = { ...formdata, jjzt }
    //     setformdata(newformdata)
    //   }
    // }
    // // 竞价进行中
    // else if (formdata.dqlc == formdata.jjls && formdata.xmzt == '竞价中') {
    //   let jjzt = "竞价结束"
    //   let newformdata = { ...formdata, jjzt }
    //   setformdata(newformdata)
    // }
  }

  const Title_item = (props) => {
    return (
      <div
        style={{
          height: "3vh", position: "relative", width: "100%", textIndent: "0.5rem", color: "#666666", lineHeight: "3vh",
          fontSize: "14px", fontWeight: "500", textAlign: "left", borderLeftStyle: "solid", borderWidth: "0.3rem", borderColor: "#a91f24",
          marginBottom: "0.5vh", letterSpacing: "0.05rem"
        }}>
        {props.title}
      </div>
    )
  }

  const Title_item_content = (props) => {
    return (
      <div style={{
        fontSize: "1rem", fontWeight: "500", color: "#a91f24", marginLeft: "1vw", position: "relative", width: "100%",
        height: "4vh", lineHeight: "4vh"
      }}>
        <div style={{ color: "#858585", position: "absolute", left: "0", width: "40%" }}>{props.title}：</div>
        <div style={{ color: "black", position: "absolute", right: "0", width: "60%", ...props.styles }}>
          {props.content}
        </div>
      </div>
    )
  }

  const wlColumnsFormatted = useMemo(() => formatColumnsWithPriceRule(wlmxcolums), [wlmxcolums, wlPrecisionMap])
  const bjColumnsFormatted = useMemo(() => formatColumnsWithPriceRule(bjcolums), [bjcolums, wlPrecisionMap])
  const zyjjColumnsFormatted = useMemo(() => formatColumnsWithPriceRule(zyjjbjcolums), [zyjjbjcolums, wlPrecisionMap])

  return (

    <div style={{
      height: "94%", backgroundColor: `#F1F1F1`, right: "1%", top: "5.9vh", overflow: "auto",
      backgroundSize: "100% 100%", width: collapsed ? "94%" : "84%", position: "absolute", color: "white", fontSize: "0.8rem"
    }}>
      <Modal title="报价"
        width="35%"
        bodyStyle={{ height: "60vh", backgroundColor: "", position: "relative", width: "100%" }}
        open={modalOpen} onOk={() => { handleBj(wldata) }} onCancel={() => { setModalOpen(false) }}>



        <div style={{ width: "70%", height: "60%", backgroundColor: "", position: "absolute", left: "3%", top: "3%" }}>

          <div style={{
            borderLeftStyle: "solid", borderColor: "#a91f24", borderWidth: "0.3rem",
            paddingLeft: "0.5rem", fontSize: "0.7rem", fontWeight: "600", color: "#a91f24", marginBottom: "0.7vh"
          }}>
            填写本轮报价</div>

          <div style={{ display: "flex" }}>
            <div style={{ width: "30%", marginBottom: "1vh" }}>物料名称：</div>
            <div style={{ width: "70%", marginBottom: "1vh" }}>
              <div style={{ width: "100%" }}  >{wldata?.wlmc}</div>
            </div>
          </div>
          <div style={{ display: "flex" }}>
            <div style={{ width: "30%", marginBottom: "1vh" }}>规格型号：</div>
            <div style={{ width: "70%", marginBottom: "1vh" }}>
              <div style={{ width: "100%" }}  >{wldata?.ggxh}</div>
            </div>
          </div>
          <div style={{ display: "flex" }}>
            <div style={{ width: "30%", marginBottom: "1vh" }}>需求数量：</div>
            <div style={{ width: "70%", marginBottom: "1vh" }}>
              <div style={{ width: "100%" }}  >{wldata?.sl}</div>
            </div>
          </div>
          {formdata.zbxs == "竞价" && <div style={{ display: "flex" }}>
            <div style={{ width: "30%", marginBottom: "1vh" }}>起始价(单价)：</div>
            <div style={{ width: "70%", marginBottom: "1vh" }}>
              <div style={{ width: "100%" }}  >{wldata?.qsj}</div>
            </div>
          </div>
          }
          {formdata.zbxs == "自由竞价" && <div style={{ display: "flex" }}>
            <div style={{ width: "30%", marginBottom: "1vh" }}>当前报价：</div>
            <div style={{ width: "70%", marginBottom: "1vh" }}>
              <div style={{ width: "100%" }}  >{wldata?.dqbj ? wldata?.dqbj : wldata?.qsj}</div>
            </div>
          </div>
          }
          <div style={{ display: "flex" }}>
            <div style={{ width: "30%", marginBottom: "1vh" }}>报价金额：</div>
            <div style={{ width: "70%", marginBottom: "1vh" }}>
              <InputNumber style={{ width: "80%" }} controls={false} value={bjjg} onChange={(value) => { setBjjg(value) }} />
            </div>
          </div>
          <div style={{ display: "flex", marginBottom: "1vh" }}>
            <div style={{ width: "30%" }}>附件：</div>
            <div style={{ width: "70%" }}>
              <Upload_fj_hooks initpxtpurl={bjfj} handleback={(value) => { setBjfj(value) }} />
            </div>
          </div>
        </div>


        <div style={{ width: "25%", height: "100%", backgroundColor: "", position: "absolute", right: "1%", top: "3%" }}>
          <div style={{
            borderLeftStyle: "solid", borderColor: "#a91f24", borderWidth: "0.3rem",
            paddingLeft: "0.5rem", fontSize: "0.7rem", fontWeight: "600", color: "#a91f24", marginBottom: "0.7vh"
          }}>
            历史报价记录</div>
          <Timeline>
            {bjmxdata.filter((item) => {


              if (wldata) {
                return item.bjwlmxid == wldata.id
              }
              else {
                return true
              }
            }).map((item) => {
              const displayPrice = formatPriceByRule(item.blbj, getConfigForRecord(item))
              return (
                <Timeline.Item key={item.id}>{item.bjlc}轮报价：{displayPrice}</Timeline.Item>
              )
            })}
          </Timeline>

        </div>

        <div style={{
          width: "70%", height: "50%", backgroundColor: "", position: "absolute",
          left: "1%", bottom: "1%"
        }}>

          <div id="chart_bjqs"
            style={{
              width: "24vw", height: "27vh", backgroundColor: "", borderRadius: "0.2rem",

            }}>
          </div>



        </div>







      </Modal>
      <div style={styles.kshcontainer}>
        {/* 主内容区：上下布局 */}
        <div style={{ width: "100%", height: "100%", backgroundColor: "#f1f3f4", display: "flex", flexDirection: "column" }}>
          {/* 上方：左右分栏 */}
          <div style={{ width: "100%", display: "flex", flexWrap: "nowrap", minWidth: 0, marginBottom: "2vh" }} data-section="main-flex">
            {/* 左侧倒计时卡片 */}
            <div style={{ width: "30%", minWidth: 260, maxWidth: 400, flexShrink: 0 }} data-section="left-card" data-card="true">
              {/* 竞价倒计时 */}
              {<Title_item title="轮次信息" />}
              <div className={formdata.jjzt == '竞价中' ? 'fly_border' : ""}
                style={{
                  width: "100%", height: "32vh", borderRadius: "10px", backgroundColor: "white", marginBottom: "1vh", marginTop: "1vh", textAlign: "center", position: 'relative',
                  boxShadow: formdata.jjzt == '竞价中' ?
                    "0 0 10px #25bf2f" : formdata.jjzt == '竞价休息' ? "0 0 10px #1890FF" :
                      "0 0 10px #ff1010",
                }}>
                {formdata.zbxs == '自由竞价' ?
                  <div style={{ fontSize: "1vw", fontWeight: "400", color: "#b6b6b6", marginTop: "1.3vh", position: "relative" }}>
                    <div style={{ position: "relative", paddingTop: "2vh" }}>
                      <span style={{ fontWeight: "400", fontSize: "1vw", }}>竞价持续</span> <span style={{ color: "#a91f24", fontWeight: "600", fontSize: "1.3vw" }}>{formdata?.mlcx}</span>分钟
                    </div>
                  </div> :
                  <div style={{ fontSize: "1vw", fontWeight: "400", color: "#b6b6b6", marginTop: "1.3vh", position: "relative" }}>
                    <div style={{ position: "relative", marginTop: "1.3vh", }}>
                      共设置 <span style={{ color: "#000000", fontWeight: "600", fontSize: "1.3vw", }}>{formdata?.jjls}</span> 轮竞价
                      &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                      当前进行 <span style={{ color: "#a91f24", fontWeight: "600", fontSize: "1.3vw" }}>{formdata?.dqlc}</span> 轮
                    </div>
                    <div style={{ position: "relative" }}>
                      <span style={{ fontWeight: "400", fontSize: "1vw", }}>每轮持续</span> <span style={{ color: "#a91f24", fontWeight: "600", fontSize: "1.3vw" }}>{formdata?.mlcx}</span>分钟
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
                      <span style={{ fontWeight: "400", fontSize: "1vw", }}>每轮间隔</span> <span style={{ color: "#000000", fontWeight: "600", fontSize: "1.3vw" }}>{formdata?.mljg}</span>分钟
                    </div>
                  </div>}
                <div style={{ fontSize: "1.2vw", fontWeight: "600", color: "#a91f24", marginTop: "3vh" }}>
                  <CountdownFlipCard initialSeconds={djs} onEnd={() => { handleDjsEnd() }} />
                </div>
                {/* 项目信息补充显示 */}
                <div style={{ fontSize: "1vw", fontWeight: "400", marginTop: "2vh", position: "relative", color: "#b6b6b6", left: "1rem" }}>
                  <div style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
                    <span>项目名称</span>
                    <span style={{ color: "#000000", fontWeight: "400", marginLeft: "0.5vw" }}>{formdata?.xmmc}</span>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "flex-start", width: "100%" }}>
                    <span>当前状态</span>
                    <span style={{
                      marginLeft: "20px", color:
                        formdata.jjzt == '竞价中' ? "#25bf2f" :
                          formdata.jjzt == '竞价休息' ? "#1890FF" :
                            "#ff1010", fontWeight: "400"
                    }}>●</span>
                    <span style={{ marginLeft: "10px" }}>{formdata.jjzt}</span>
                    <span style={{ marginLeft: "30px" }}>竞价规则</span>
                    <span style={{ marginLeft: "20px", color: "#000000", fontWeight: "400" }}>{formdata?.jjgz}</span>
                  </div>
                </div>
                {/* <div style={{ fontSize: "1.2vw", fontWeight: "600", color: "#ff1010", marginTop: "3vh" }}>
                <span style={{ marginRight: "0.5vw" }}>当前论次:</span><span style={{ color: "#ff1010" }}>{formdata?.dqlc}</span>
              </div> */}
                {/* <div style={{ fontSize: "1.2vw", fontWeight: "400", marginTop: "5vh", position: "relative" }}>
                <div style={{ position: "absolute", left: "0", width: "50%" }}>
                  <span style={{}}>每轮持续</span> <span style={{ color: "#428fe6", fontWeight:"600",marginLeft: "0.5vw" }}>{formdata?.mlcx}分钟</span>
                </div>
                <div style={{ position: "absolute", right: "0", width: "50%" }}>
                  <span style={{}}>每轮间隔</span> <span style={{ color: "#428fe6", fontWeight:"600",marginLeft: "0.5vw" }}>{formdata?.mljg}分钟</span>
                </div>
              </div> */}
              </div>
            </div>
            {/* 右侧竞价行信息表格 */}
            <div style={{ width: "67%", minWidth: 0, marginLeft: "3%", flex: 1, paddingRight: "1.5vw" }} data-section="right-card" data-card="true">
              {<Title_item title="竞价行信息" />}
              <div style={{ width: "100%", height: "32vh", position: 'relative', borderRadius: "10px", backgroundColor: "white", marginBottom: "1vh", padding: "1vh 0", overflowX: "auto", minWidth: "600px" }} data-table-container="true">
                <Custom_table_hooks_config
                  tabledata={wlmxdata} tablecolnum={wlColumnsFormatted}
                  width={"98%"}
                  czWidth="60px"
                  showCz
                  noSearch
                  renderCz={(data) => {
                    return <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
                      {/* <Popconfirm title="确定要报价吗？" disabled={formdata.jjzt != "竞价中"} onConfirm={() => { */}
                      {/* if(data.SubTableCount==1){
                          openNotification_util("该物料已被淘汰，请报价其他物料")
                          return
                        }
                        setModalOpen(true);
                        setWldata(data);
                        setTimeout(() => {
                          initchartdrcctj();
                        }, 1000);
                      }}> */}
                      <Button onClick={() => {
                        if (data.SubTableCount == 1) {
                          openNotification_util("该物料已被淘汰，请报价其他物料")
                          return
                        }
                        if (formdata.zbxs == "自由竞价") {
                          const basePrice = ensureNumeric(
                            data.dqbj !== undefined && data.dqbj !== null && data.dqbj !== '' ? data.dqbj : data.qsj
                          )
                          let diffValue = 0
                          if (isPercentMode(data.blje)) {
                            diffValue = basePrice * ensureNumeric(String(data.blje).replace("%", "")) * 0.01
                          } else {
                            diffValue = ensureNumeric(data.blje)
                          }
                          let suggestedPrice = basePrice
                          if (formdata.jjgz == "价高优先") {
                            suggestedPrice = basePrice + diffValue
                          } else {
                            suggestedPrice = basePrice - diffValue
                          }
                          setBjjg(normalizePriceByRule(suggestedPrice, data))
                        }
                        setModalOpen(true);
                        setWldata(data);
                        setTimeout(() => {
                          initchartdrcctj();
                        }, 1000);
                      }} disabled={formdata.jjzt != "竞价中"} style={{
                        fontSize: '0.6rem', backgroundColor: "#f0fdfd",
                        fontWeight: "600", color: "#090c94"
                      }} size="small" >报价</Button>
                      {/* </Popconfirm> */}
                    </div>
                  }}
                  sfdoubleclick="false" ifhiddencchangeselecttype="true"
                  defaultPageSize={10}
                  bordered
                />
              </div>
            </div>
          </div>
          {/* 下方：报价明细 */}
          <Title_item title="报价明细" />
          <div style={{ width: "100%", height: "calc(100% - 44vh)", position: 'relative', borderRadius: "10px", paddingRight: "2vw", backgroundColor: "white", marginBottom: "1vh", marginTop: "1vh", padding: "1vh 0", overflowX: "auto", minWidth: "600px" }} data-section="bid-detail" data-table-container="true">
            {formdata.jjls > 0 && formdata.zbxs !== "自由竞价" && (
              <Tabs activeKey={bjlc?.toString()} onChange={(key) => { setBjlc(key) }} className='task-tabs' >
                {Array.from({ length: formdata.jjls }, (_, i) => (
                  <Tabs.TabPane tab={<span>第{i + 1}轮报价</span>} key={i + 1}>
                    <Custom_table_hooks_config
                      tabledata={addkey_for_mxdata(bjmxdata.filter((item) => item.bjlc === i + 1))}
                      tablecolnum={bjColumnsFormatted}
                      width={"100%"}
                      sfdoubleclick="false"
                      ifhiddencchangeselecttype="true"
                      defaultPageSize={10}
                      bordered
                    />
                  </Tabs.TabPane>
                ))}
              </Tabs>
            )}
            {formdata.zbxs === "自由竞价" && (
              <Tabs className='task-tabs' defaultActiveKey={activeKey} onChange={(key) => setactiveKey(key)}>
                {wlmxdata.map(wlmx => {
                  let newbjmxdata = [...JSON.parse(JSON.stringify(bjmxdata))]
                  const matchingBjmxdata = [...newbjmxdata.filter(item => item.wlmc === wlmx.wlmc).map((item, index) => {
                    item.blpm = index + 1
                    item.xuhao = index + 1
                    return item
                  })];
                  return (
                    <Tabs.TabPane tab={wlmx.wlmc} key={wlmx.wlmc}>
                      <Custom_table_hooks_config
                        tabledata={matchingBjmxdata}
                        supplierMap={supplierMap}
                        tablecolnum={zyjjColumnsFormatted}
                        width={"100%"}
                        ifhiddencchangeselecttype="true"
                        defaultPageSize={5}
                        bordered
                      />
                    </Tabs.TabPane>
                  );
                })}
              </Tabs>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}


export default Gysjb_form
var styles = {
  kshcontainer: {
    width: "98%", position: "absolute", top: "2%", left: "1%", backgroundColor: "white", color: "black", height: "98%",
    borderRadius: "10px"
  },
}